<!--
 * @Author: chenzechao
 * @Date: 2024-02-04 14:18:15
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-02-06 17:33:51
 * @FilePath: \accesscontrolui\src\views\xtpz\attendance-group\components\free-classes.vue
 * @Description:
-->
<template>
  <section class="panel">
    <el-alert
        title="切换月份可能会重置部分人员的排班数据，如需切换月份，请先保存！"
        :closable="false"
        type="warning">
    </el-alert>
    <el-form :inline="true" :rules="rules" :model="form" ref="form">
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-form-item label="">
            <el-checkbox v-model="form.holidaysIsValid">节假日是否生效</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="月份" prop="month">
            <el-date-picker
                :clearable="false"
                @change="monthChange"
                v-model="form.month"
                type="month"
                :picker-options="pickerOptions"
                placeholder="选择月">
            </el-date-picker>
            <el-button size="mini" type="primary" class="ml20" @click="delTabClasses">清除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        id="freeClasses"
        @cell-click="cellClick"
        v-if="headerData.length"
        :data="tableData"
        height="400"
        :header-cell-style="tableHeaderColor"
        :cell-style="cellStayle"
        style="width: 100%;">
      <el-table-column
          fixed
          prop="name"
          show-overflow-tooltip
          align="center"
          min-width="100"
          label="人员"
      >
      </el-table-column>


      <!--      最顶层的星期列-->
      <el-table-column v-for="(item,index) in headerData"
                       :key="index"
                       align="center"
                       :prop="index+''"
                       :label="item.day">
        <!--        日期列-->
        <el-table-column
            prop="date"
            show-overflow-tooltip
            :label="'' + item.id"
            align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classesList[index].name||"休息" }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!--    修改班次弹窗-->
    <!--    :title="activeDay.row.classesList[activeDay.dayIndex].date"-->
    <el-dialog
        v-if="editVisible"
        :title="activeDay.row.classesList[activeDay.dayIndex].date"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="editVisible"
        width="40%"
        :before-close="handleClose">
      <el-tabs v-model="activeTabsName" type="" @tab-click="classesTabsClick">
        <!--        {{'周'+new Date(activeDay.row.classesList[activeDay.dayIndex].date).getDay()}}-->
        <el-tab-pane name="1" label="班次排班">
          <el-form ref="editForm" :model="classesPopFrom" :rules="editRules" label-width="80px">
            <el-form-item label="" prop="workingScheduleId">
              <el-radio-group
                  id="cusRadio"
                  v-model="classesPopFrom.workingScheduleId"
                  v-for="group in classesList"
                  :key="group.label"
                  :label="group.label"
                  class="group-radio">
                <el-radio
                    v-for="(item, index) in group.options"
                    :class="item.id == -100 ? 'colorGreen' : (index %3 == 0 ? 'colorOrange' : (index%3 == 1 ? 'colorYellow' : 'colorPurple'))"
                    :key="item.id"
                    :label="item.id"
                    :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span v-if="item.id!=-100" style="float: right; font-size: 13px">{{ item.time0.substring(0, 5) + "~"+ item.time1.substring(0, 5)}}</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <div style="text-align: center">
              <el-form-item>
                <el-button size="mini" @click="handleDel" title="清除当天排班">清除</el-button>
                <!-- <el-button size="mini" @click="handleClose">取消</el-button> -->
                <el-button size="mini" type="primary" @click="saveClasses">保存</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="2" label="周期排班">
          <div class="emptyBox" v-if="!cycleList.length&&!addTip">
            <img src="@/assets/common/img/nodataIcon.png" alt="" />
            <!--暂无数据-->
            <div>{{this.i18n.t('No data available')}}</div>
          </div>

          <div v-if="!addTip&&cycleList.length">

            <el-popover
                v-for="item in cycleList"
                :key="item.id"
                placement="right"
                width="500"
                trigger="hover">
              <p class="cycleTitle">周期名称</p>
              <p class="cycleTitle cycleValue">{{item.name}}</p>
              <p class="cycleTitle">周期类型</p>
              <p class="cycleTitle cycleValue">{{item.type===0?'按天循环':'按周循环'}}</p>

              <el-tag class="cycleItemTag" type="warning" v-for="itemSub in item.looperRulerDetails" :key="itemSub.id">
                {{itemSub.workingSchedule?itemSub.workingSchedule.name:'休息'}}
              </el-tag>
<!--              <el-button slot="reference">click 激活</el-button>-->
              <el-tag
                  slot="reference"
                  class="cycleTag"

                  closable
                  @click="tagClick(item)"
                  @close="tagClose(item)"
                  effect="dark"
              >
                {{item.name}}
              </el-tag>
            </el-popover>



          </div>
          <br>
          <div style="text-align: center">
            <el-button size="mini" type="handle" @click="addNewClasses" v-if="!addTip">
              <i class="icon-plus-circle iconfont-KUI"></i>
              新建周期
            </el-button>
          </div>


          <el-form ref="cycleForm" v-if="addTip" :model="cycleForm" :rules="rules2" label-width="80px" label-position="left" size="mini">
            <el-form-item label="周期名称" prop="name" id="nameBox">
              <el-input v-model="cycleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-radio-group v-model="cycleForm.loopMode" align="left" id="loop">
                <el-radio :label="0">按天循环</el-radio>
                <el-radio :label="1">按周循环</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--            按天循环-->
            <div v-if="cycleForm.loopMode==0">
              <div style="border: 0px solid red;width: 100%;max-height: 250px;overflow-y: scroll">
                <el-form-item
                    v-for="(item, index) in cycleForm.classesItem"
                    :label="'第' + (index+1) + '天'"
                    :key="item.key"
                    :rules="{required: true, message: '班次不能为空', trigger: 'blur'}"
                >
                  <el-select  style="width: 300px !important;margin-right: 10px" v-model="item.workingScheduleId" placeholder="请选择">
                    <el-option-group
                        v-for="group in classesList"
                        :key="group.label"
                        :label="group.label">
                      <el-option
                          v-for="item in group.options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        <span style="float: left">{{ item.name }}</span>
                        <span v-if="item.id!=-100" style="float: right; color: #8492a6; font-size: 13px">{{ item.time0 + "~"+ item.time1}}</span>
                      </el-option>
                    </el-option-group>
                  </el-select>

                  <el-button v-if="index+1==cycleForm.classesItem.length" title="增加一天" @click="addDays" :disabled="cycleForm.classesItem.length==selectedDate.maxDays"  type="handle" icon="el-icon-plus"></el-button>
                  <el-button v-if="index+1==cycleForm.classesItem.length"  title="减少一天" @click="delLastDays(index)" :disabled="cycleForm.classesItem.length==1" type="handle" icon="el-icon-minus"></el-button>

                </el-form-item>
              </div>

            </div>

            <!--            按周循环-->
            <div v-if="cycleForm.loopMode==1">
              <el-form-item
                  v-for="(item, index) in cycleForm.weekItem"
                  :label="item.label"
                  :key="item.key"
                  :prop="'weekItem.' + index + '.workingScheduleId'"
                  :rules="{required: true, message: '班次不能为空', trigger: 'blur'}"
              >
                <el-select @change="weekChange" style="width: 332px !important" v-model="item.workingScheduleId" placeholder="请选择">
                  <el-option-group
                      v-for="group in classesList"
                      :key="group.label"
                      :label="group.label">
                    <el-option
                        v-for="item in group.options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      <span style="float: left">{{ item.name }}</span>
                      <span v-if="item.id!=-100" style="float: right; color: #8492a6; font-size: 13px">{{ item.time0 + "~"+ item.time1}}</span>
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </div>
            <br>
            <div style="text-align: center">
              <el-button size="mini" @click="closeClasses">取消</el-button>
              <el-button size="mini" type="primary" @click="saveCycleClasses">保存</el-button>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </section>
</template>
<script>
import Panel from "@/components/panel.vue";
import Pagination from "@/components/Pagination/index.vue";
import DeleteDialog from "./delete-dialog.vue";
import ClassesDetails from "@/views/xtpz/classes/components/details.vue";
import { getMonthInfo } from "@/assets/common/js/utils/dataInfo.js";
import {workingscheduleGetlist} from "@/api/pcmj/bcgl";
import {looperrulerCreate, looperrulerGetList} from "@/api/pcmj/zqgl";
import {searchattendancegroupworkingscheduleinfo,looperrulerDelete} from "@/api/pcmj/kqz";
import {deleteDocument} from "@/api/document";
export default {
  components: {
    DeleteDialog,
    ClassesDetails,
    Panel,
    Pagination,
  },
  watch: {
    "cycleForm.weekItem"(newVal,oldVal){
      console.log('cycleForm.weekItem变化了',newVal);
    },
    detailRow(newVal,oldVal){
      this.detailRow=newVal
      console.log('777777777777777777777777777777detailRow变化了',newVal);
    },
    personnelList(newVal,oldVal){
      var tablePersonnelList=this.getTablePersonneIdlList()
      console.log('this.tableData',JSON.parse(JSON.stringify(this.tableData)));
      console.log('新人员树personnelList',newVal);
      console.log('旧人员树personnelList',oldVal);
      console.log('表格内的数据',tablePersonnelList);
      // if (!oldVal){
      //   oldVal=[]
      // }

      if (newVal.length){
        if (!this.tableData.length){
          console.log("******************!this.tableData.length");
          this.tableData=this.createTemporaryData(newVal)
          // 同步更新this.rightTreeList
          newVal.map(item=>{
            this.rightTreeList.push({
              id:item.id,
              name:this.getPersonNameById(item.id)
            })
          })
          console.log('更新this.rightTreeList后',this.rightTreeList);
        }else{
          var tablePersonnelIdList=this.getTablePersonneIdlList()
          if (newVal.length>tablePersonnelList.length){
            console.log('在新增');
            // debugger
            var difference=this.findMissingElements(tablePersonnelIdList,newVal);
            console.log('差异项',difference);
            var newPersonnelList=this.createTemporaryData(difference)
            console.log('生成每天临时数据后',newPersonnelList);
            this.tableData=this.tableData.concat(newPersonnelList)

            // 人员树增加人员时，同步更新this.rightTreeList
            newPersonnelList.map(item=>{
              this.rightTreeList.push({
                id:item.id,
                name:item.name
              })
            })
            console.log('合并后',this.rightTreeList);
          }else if(newVal.length<tablePersonnelList.length){
            console.log('在删除');

            var difference=this.findMissingElements(newVal, tablePersonnelList);
            console.log('差异项',difference);
            // 删除表格内的人员
            for (var i=0;i<difference.length;i++){
              for (var j=0;j<this.tableData.length;j++){
                if (difference[i].id==this.tableData[j].personId){
                  this.tableData.splice(j,1)
                }
              }
            }
            console.log('this.tableData',this.tableData);
            // 删除右侧人员树变量rightTreeList的那个人
            for (var i=0;i<difference.length;i++){
              for (var j=0;j<this.rightTreeList.length;j++){
                if (difference[i].id==this.rightTreeList[j].id){
                  this.rightTreeList.splice(j,1)
                }
              }
            }

            console.log('this.rightTreeList删除后',this.rightTreeList);
          }
        }

      }else{
        this.tableData=[]
        this.leftTableList=[]
        this.rightTreeList=[]
      }
      console.log('this.tableData',this.tableData);
      console.log('this.leftTableList',this.leftTableList);
      console.log('this.rightTreeList',this.rightTreeList);

    },
    "form.month"(newVal,oldVal){
      console.log('月份变化了',newVal);

      var date=newVal
      // 月份变化时，清空右侧人员树勾选
      // this.$parent.$parent.$parent.setTreeSelection([])
      var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      var year=date.getFullYear()
      var month=date.getMonth()+1
      // 计算选择月份的天数
      var days=this.getDaysInMonth(date)
      console.log('年',year);
      console.log('月',month);



      this.headerData=[]
      this.tableData=[]



      this.selectedDate.year=year
      this.selectedDate.month=month<10?"0"+month:month
      this.selectedDate.maxDays=days
      this.selectedDate.startTime=year+'-'+this.selectedDate.month+'-'+"01"
      this.selectedDate.endTime=year+'-'+this.selectedDate.month+'-'+days


      if (this.handleTypeSub=="edit"){
        var params=JSON.parse(JSON.stringify(this.detailRow))
        // 查询当前选择月份的排版明细
        this.searchattendancegroupworkingscheduleinfo({
          attendanceGroupId:params.id,
          startDate:this.selectedDate.startTime,
          endDate:this.selectedDate.endTime,
        })

        console.log('detailRow',params);

      }

      console.log(this.$parent.$parent.$parent);
      setTimeout(()=>{
        for (let i=1;i<=days;i++){
          const weekdayIndex = new Date(year, month-1, i).getDay(); // 获取星期几的索引，0表示星期日，1表示星期一，以此类推
          const rowData = {
            // 星期
            day:weekday[weekdayIndex],
            dayNumber:weekdayIndex,
            id:i
          };
          rowData['col' + (i)] = year+'-'+this.selectedDate.month+'-'+i; // 每列的字段名为col1, col2, ..., colN
          this.headerData.push(rowData)

        }

        console.log('headerData',this.headerData);
        console.log('tableData',this.tableData);
        console.log('this.selectedDate',this.selectedDate);
      },10)



    },
    filterPersonList(newVal,oldVal){
      console.log('filterPersonList变化了',newVal);
      // this.tableData.map(item=>{
      //   item.name=this.getPersonNameById(item.personId)
      // })
    }
  },
  props: {
    classesList:{
      type:Array,
      default:[]
    },
    filterPersonList:{
      type:Array,
      default:[]
    },
    getNameByIdFn:{
      type:Function,
      default:null
    },
    personnelList:{
      type:Array,
      default:[]
    },
    handleTypeSub: {
      type: String,
      default: ""
    },
    detailRow:{
      type:Object,
      default:()=>{
        return {}
      }
    },
  },
  data() {
    var validateMonth = (rule, value, callback) => {
      if (value === null) {
        // 请输入班次名称
        callback(new Error('请选择月份'));
      } else {
        callback();
      }
    };
    var validateWorkingScheduleId = (rule, value, callback) => {
      if (value === null) {
        // 请输入班次名称
        callback(new Error('请选择班次'));
      } else {
        callback();
      }
    };

    return {
      textWidth: 100,
      weekday:["日", "一", "二", "三", "四", "五", "六"],
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const today = new Date();
          // 获取当前年份
          const currentYear = today.getFullYear();
          // 获取当前月份
          const currentMonth = today.getMonth();
          // 获取选中的日期的年份
          const year = time.getFullYear();
          // 获取选中的日期的月份
          const month = time.getMonth();
          // 如果选中的年份小于当前年份，禁用
          if (year < currentYear) {
            return true;
          }
          // 如果选中的年份等于当前年份，且选中的月份小于当前月份，禁用
          if (year === currentYear && month < currentMonth) {
            return true;
          }
          // 允许选择当前月份和未来月份
          return false;
        }
      },
      rowData:null,
      classTabCheck: [],
      classTabCheckInfo: [],
      cycleForm:{
        name:'',
        loopMode:0,
        classesItem:[{
          name:null,
          personId:null,
          workingScheduleId:-100,
          key: Date.now()
        }],
        weekItem:[
          {
            label:"星期一",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862478556
          },
          {
            label:"星期二",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862492948
          },
          {
            label:"星期三",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862502043
          },
          {
            label:"星期四",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862511772
          },
          {
            label:"星期五",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862528428
          },
          {
            label:"星期六",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862543571
          },
          {
            label:"星期日",
            name: null,
            personId: null,
            workingScheduleId: -100,
            key: 1709862559004
          },
        ]
      },
      addTip: false,
      // 周期排班列表
      cycleList: [],
      clickList: [],
      clickindex: 0,
      clickItem: "",
      clickDay: "",
      activeTabsName:"1",
      result:[],
      classesLoading:false,
      editVisible:false,
      classesPopFrom:{
        workingScheduleId:null
      },
      headerData:[],
      tableData: [],
      editRules:{
        workingScheduleId: [
          {validator: validateWorkingScheduleId, required: true, trigger: 'blur'}
        ],
      },
      rules: {
        month: [
          {validator: validateMonth, required: true, trigger: 'blur'}
        ],
      },
      rules2: {
        name: [
          {required: true, message: '周期名称不能为空', trigger: 'blur'},
          {max: 24, message: '长度不能超过24位', trigger: 'blur'}
        ],
      },
      form:{
        month:null,
        holidaysIsValid:false
      },
      weekList: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      daysInMonth: 0,
      firstDayOfWeek: "",
      month: "",
      block: "free",
      selectedDate:{
        year:null,
        month:null,
        maxDays:null,
        startTime:null,
        endTime:null,
      },
      activeDay:{
        dayIndex:null,
        row:null
      },
      leftTableList:[],
      rightTreeList:[],
    };
  },
  methods: {
    looperrulerDelete(id){
      looperrulerDelete(id)
          .then(res=>{
            if (res.code == 200) {
              // 获取弹框内周列表
              this.looperrulerGetList()
              // this.cycleList=res.data.values
            } else {
            }
          }).catch(err => {
      })
    },
    tagClose(row){
      console.log('关闭tag',row);
      this.W.$myConfirm('warning', "确定要删除该排班周期吗？")
          .then(async () => {
            this.looperrulerDelete(row.id)
          })
          .catch(() => {
          });

    },
    tagClick(row){
      console.log('点击tag',row);
      this.setClasses(row.name)

    },
    classesTabsClick(obj){
      this.resetCycle()
      console.log(obj);
      if (obj.index=="1"){
        // 获取弹框内周列表
        this.looperrulerGetList()
      }
    },
    setClasses(str){
      let newList;
      let tmpType;
      let reloadClassesList;
      let oldClassesList;
      this.cycleList.forEach(item => {
        if (item.name == str) {
          tmpType = item.type == 0 ? 0 : 1;
          newList = item.looperRulerDetails
          return false;
        }
      });
      this.tableData.forEach(item => {
        if (item.id == this.clickItem) {
          oldClassesList = item.classesList;
        }
      });
      console.log('旧的月数据', oldClassesList);
      console.log('新建的规则', newList);
      console.log('刚才选中的人员ID', this.clickItem);
      if (tmpType == 0) {
        newList.forEach((item, i) => {
          // item.index = i;
          item.name = item.workingSchedule != null ? item.workingSchedule.name : '休息';
          delete item.index;
        });
        reloadClassesList=this.applyRuleToClassesList(oldClassesList,newList,this.clickIndex)
        console.log('按天循环', reloadClassesList)
      } else {
        newList.forEach((item, i) => {
          // item.index = i;
          item.name = item.workingSchedule != null ? item.workingSchedule.name : '休息';
        });
        reloadClassesList=this.applyRuleToClassesListWeek(oldClassesList,newList,this.clickIndex, new Date(this.clickDay).getDay())
        console.log('按周循环', reloadClassesList)
      }

      // 查找表格内被修改的人员，覆盖表格内被修改人员当月的排班数据
      for (var i=0;i<this.tableData.length;i++){
        if (this.tableData[i].personId==this.clickItem){
          this.tableData[i].classesList=reloadClassesList;
          break
        }
      }
      console.log('修改完表格之后的数据',this.tableData);
      // 关闭弹窗
      this.handleClose()
    },
    addNewClasses(){
      this.addTip = true;
    },
    looperrulerGetList(){
      let params = {
        "pageNumber": 1,
        "pageSize": 99999
      }
      looperrulerGetList(params)
          .then(res=>{
            if (res.code == 200) {
              this.cycleList=res.data.values
            } else {
            }
          }).catch(err => {
      })
    },
    delTabClasses(){
      let self = this;
      this.W.$myConfirm('warning', this.i18n.t('Are you sure you want to clear the flights for the month')+' <span style="color: red;font-weight: bold">')
          .then(async _ => {
            if (self.tableData.length > 1) {
              self.tableData.forEach(item => {
                item.classesList.forEach(item => {
                  item.workingScheduleId = null;
                  item.name = "休息";
                })
              })
            } else if (self.tableData.length > 0) {
              self.tableData[0].classesList.forEach(item => {
                item.workingScheduleId = null;
                item.name = "休息";
              })
            }

            this.classesPopFrom.workingScheduleId=null
            // 重置表单
            this.$refs.editForm.resetFields()
          })
          .catch(_ => { });
    },
    cellStayle(row, column, rowIndex, columnIndex) {
      // console.log(1112222, row)
      if (row.columnIndex === row.row.classesList.length+1)
        return;
      if (row.columnIndex === 0)
        return;
      // console.log(603, row);
      // console.log(6034, this.classesList);
      // console.log(604, row.rows.classesList[row.columnIndex].name);
      var name = row.row.classesList[row.columnIndex-1].workingScheduleId;
      // console.log(658, row.row.classesList[row.columnIndex-1]);
      // console.log(659, this.classesList);
      var nowColor;
      this.classesList.forEach(item => {
        item.options.forEach(item2 => {
          if (item2.id === -100) {
            nowColor =  item2.color;
            return false;
          } else if (item2.id == name) {
            nowColor =  item2.color;
            return false;
          }
        })
      })
      return nowColor;
    },
    weekChange(val){
      // console.log(this.cycleForm.weekItem);
    },
    // 设置表头颜色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      var label=row[columnIndex].label
      // console.log('label',label);
      // console.log('row',row);
      // console.log('column',column);
      // console.log('rowIndex',rowIndex);
      // console.log('columnIndex',columnIndex);
      if (label === '星期六' || label === '星期日') {
        return 'background-color: #fc95b6;color:#fff;'; //周六日列背景色是粉色
      }else if(label!='姓名'&&isNaN(label)){
        return 'background-color: #58cee8;color:#fff;'; //除去姓名列、日期列外，周一到周五显示深蓝色
      }else if(label!='姓名'&&!isNaN(label)){
        return 'background-color: #edfafc;';//除去姓名列、周一到周五列外，日期列显示浅蓝色
      }
    },
    // 获取表格内人员ID列表
    getTablePersonneIdlList(){
      if (this.tableData.length){
        var idList=[]
        this.tableData.map(item=>{
          idList.push({id:item.id})
        })
        return idList
      }
    },
    // 设置右侧人员树勾选
    setPersonnelTreeSelection(){
      if (this.tableData.length){
        var selectedPersons=[]
        this.tableData.map(item=>{
          selectedPersons.push(item.personId)
        })
        setTimeout(()=>{
          // 设置右侧人员树勾选
          this.$parent.$parent.$parent.setTreeSelection(selectedPersons)
          console.log('选中的人员列表',selectedPersons);
        },300)
      }
    },
    // 获取考勤组排班详情(排班制页面用)
    searchattendancegroupworkingscheduleinfo(params){
      searchattendancegroupworkingscheduleinfo(params).then(res=>{
        if (res.code == 200) {
          if (res.data.length){
            // debugger
            // 把接口数据处理成页面需要的格式
            var schedulingDetails=this.groupByIds(res.data)
            console.log('排版详情接口数据转换后的格式',schedulingDetails);
            // this.tableData=res.data
            this.leftTableList=[]
            schedulingDetails.map(item=>{
              var temp={
                id:item.personId,
                personId:item.personId,
                name:item.name,
                classesList:item.classesList,
              }
              this.leftTableList.push(temp)
            })
            // console.log("441处理后的tableData",this.tableData);

            console.log('rightTreeList',this.rightTreeList);
            console.log("原始的leftTableList",JSON.parse(JSON.stringify(this.leftTableList)));
            console.log("this.personnelList",this.personnelList);

            var difference=this.findMissingElements(this.rightTreeList,this.leftTableList);
            console.log('603差异项',difference);
            if (difference.length){
              console.log('左右有差异');
              if (this.rightTreeList.length>this.leftTableList.length){
                console.log('右侧人员比左侧人员多，把多出来的人员往左侧追加');
                if (this.leftTableList.length){
                  // 排班详情接口内有人员的排班数据时，把右侧树结构多出的人员往左侧追加
                  console.log('排班详情接口内有数据');
                  // 找出差异项
                  var difference=this.findMissingElements(this.rightTreeList,this.leftTableList);

                  // 多出来的人员，生成30天的临时数据
                  var differenceList=this.createTemporaryData(difference)
                  console.log('多出来的人员，生成30天的临时数据后',differenceList);
                  // 多出来的人员左侧表格追加
                  differenceList.map(item=>{
                    item.id=item.personId
                    this.leftTableList.push(item)
                  })
                  console.log('左侧表格内应该显示的人员列表',JSON.parse(JSON.stringify(this.leftTableList)));
                  this.tableData=this.leftTableList


                }else{
                  // 排班详情接口内没有人员的排班数据，直接把右侧的数据每个人生成30天的排班数据
                  var differenceList=this.createTemporaryData(this.rightTreeList)
                  console.log('排班详情接口内无数据，生成30天的临时数据后',differenceList);
                  // 左侧表格赋值
                  this.tableData=differenceList
                  console.log('表格内的数据',this.tableData);
                }
                // 右侧树多出的人员往左侧表格追加
              }else if (this.leftTableList.length>this.rightTreeList.length){
                // 如果左侧表格的人员比右侧树多，删除表格内多出的人员
                console.log('左侧人员比右侧多，删除左侧多出的人员');
                for (var i=0;i<difference.length;i++){
                  for (var j=0;j<this.leftTableList.length;j++){
                    if (difference[i].id==this.leftTableList[j].id){
                      this.leftTableList.splice(j,1)
                    }
                  }
                }
                console.log('删除左侧多出来的人后的leftTableList',JSON.parse(JSON.stringify(this.leftTableList)));
                //   把右侧多余出来的人员筛选出来往
                var differenceSub=this.findMissingElements(this.leftTableList,this.rightTreeList);
                console.log('differenceSub', differenceSub);
                // 多出来的人员，生成30天的临时数据
                var differenceList=this.createTemporaryData(differenceSub)
                console.log('多出来的人员，生成30天的临时数据后',differenceList);
                // 多出来的人员左侧表格追加
                differenceList.map(item=>{
                  item.id=item.personId
                  this.leftTableList.push(item)
                })
                console.log('左侧表格内应该显示的人员列表',JSON.parse(JSON.stringify(this.leftTableList)));
                this.tableData=this.leftTableList

              }else if(this.leftTableList.length==this.rightTreeList.length){
                console.log('左右两边人数相等');
                //把接口内ID和右侧人员树相同人员的班次数据设置到rightTreeList内
                for (var i=0;i<this.rightTreeList.length;i++){
                  for (var j=0;j<this.leftTableList.length;j++){
                    if (this.rightTreeList[i].id==this.leftTableList[j].id){
                      this.rightTreeList[i].classesList=this.leftTableList[j].classesList
                    }
                  }
                }
                console.log("设置后",this.rightTreeList);
                var diffList=[]
                // 找出rightTreeList没有班次数据的人员
                for (var i=0;i<this.rightTreeList.length;i++){
                  if (!this.rightTreeList[i].classesList){
                    diffList.push(this.rightTreeList[i])
                    // 生成30天的临时数据
                    // var differenceList=this.createTemporaryData(differenceSub)
                  }
                }
                console.log('diffList',diffList);
                // 设置rightTreeList内，对没有排版的人员生成30天的临时数据
                var differenceList=this.createTemporaryData(diffList)
                console.log('生成30天的临时数据后',differenceList);
                // 生成好的数据设置到rightTreeList变量内
                for (var i=0;i<this.rightTreeList.length;i++){
                  for (var j=0;j<differenceList.length;j++){
                    if (this.rightTreeList[i].id==differenceList[j].id){
                      this.rightTreeList[i].classesList=differenceList[j].classesList
                    }
                  }
                }

                console.log('左侧表格内应该显示的人员列表',JSON.parse(JSON.stringify(this.rightTreeList)));
                // 表格赋值
                this.tableData=this.rightTreeList

              }
            }else{
              this.tableData=this.leftTableList
            }
          }else{
            // 此月份没有排班数据时，把右侧权限树的人员往左侧排
            // 排班详情接口内没有人员的排班数据，直接把右侧的数据每个人生成30天的排班数据
            var differenceList=this.createTemporaryData(this.rightTreeList)
            console.log('排班详情接口内无数据，生成30天的临时数据后',differenceList);
            // 左侧表格赋值
            this.tableData=differenceList
            console.log('表格内的数据',this.tableData);
          }


        }
      })
    },
    // 根据班次ID获取班次名称
    getworkingName(workingScheduleId){
      if (!workingScheduleId||workingScheduleId==-100){
        return '休息'
      }else{
        console.log(917,this.classesList);
        for (var i=0;i<this.classesList[1].options.length;i++){
          if (this.classesList[1].options[i].id==workingScheduleId){
            return this.classesList[1].options[i].name
          }
        }
      }
    },
    // 根据人员ID获取人员名称
    getPersonNameById(id){
      for (var i=0;i<this.filterPersonList.length;i++){
        if (this.filterPersonList[i].personnelId==id){
          return this.filterPersonList[i].name
        }
      }
    },
    // 把接口给的数据处理成界面需要的JSON(排版制页面需要)
    groupByIds(data){
      const result = [];

      for (const item of data) {
        let existingItem = result.find(entry => entry.personId === item.personId);
        if (!existingItem) {
          existingItem = {
            name:this.getPersonNameById(item.personId),
            personId: item.personId,
            classesList: []
          };
          result.push(existingItem);
        }

        existingItem.classesList.push({
          date: item.date,
          name:this.getworkingName(item.workingScheduleId),
          workingScheduleId: item.workingScheduleId
        });
        existingItem.classesList.sort((a, b) => new Date(a.date) - new Date(b.date));
      }

      return result;
    },
    delLastDays(index){
      console.log('下标',index,this.cycleForm.classesItem);
      this.cycleForm.classesItem.splice(index,1)
    },
    delDays(item) {
      var index = this.cycleForm.classesItem.indexOf(item)
      if (index !== -1) {
        this.cycleForm.classesItem.splice(index, 1)
      }

    },
    addDays() {
      this.cycleForm.classesItem.push({
        name:null,
        personId:null,
        workingScheduleId:-100,
        key: Date.now()
      });
    },
    // 新增人员时，生成30天的临时数据
    createTemporaryData(personnelIdList){
      var count=this.selectedDate.maxDays,
          year=this.selectedDate.year,
          month=this.selectedDate.month
      var personnelList=[]

      if (personnelIdList.length){
        personnelIdList.map(item=>{
          var temp={
            id:item.id,
            personId:item.id,
            name:this.getPersonNameById(item.id),
            classesList:[]
          }
          // 当前这个人生成30天的临时数据
          for (var i=0;i<count;i++){
            var tempSub={
              date: year+"-"+month+"-"+(i+1),
              workingScheduleId: null,
              name:null
            }
            temp.classesList.push(tempSub)
          }
          personnelList.push(temp)
        })
        return personnelList
      }else{
        return []
      }

    },
    //查找出不一样的ID
    findMissingElements(arr1, arr2){
      var result = [];
      for (var i = 0; i < arr1.length; i++) {
        var found = false;
        for (var j = 0; j < arr2.length; j++) {
          if (arr1[i].id === arr2[j].id) {
            found = true;
            break;
          }
        }
        if (!found) {
          result.push(arr1[i]);
        }
      }
      for (var i = 0; i < arr2.length; i++) {
        var found = false;
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[i].id === arr1[j].id) {
            found = true;
            break;
          }
        }
        if (!found) {
          result.push(arr2[i]);
        }
      }
      return result;
    },
    handleDel(){
      // console.log(971, this.classesList);
      let self = this;
      let personnelId=this.activeDay.row.personId,
          index=null;
      setTimeout(()=>{
        this.activeDay.dayIndex=null
        this.activeDay.row=null
        console.log('重置activeDay');
      },100)

      if (this.activeTabsName=="1"){
        // console.log(22,this.tableData);

        // 修改当天的班次ID
        for (let i=0;i<this.tableData.length;i++){
          if (this.tableData[i].personId==personnelId){
            this.tableData[i].classesList[this.activeDay.dayIndex].workingScheduleId=null
            index=i
            break
          }
        }

        console.log(905, this.classesList);

        // 设置每天的班次名称
        this.tableData[index].classesList[this.activeDay.dayIndex].name="休息"
        console.log('重置班次排班', this.tableData);
        this.classesPopFrom.workingScheduleId=null
        // 重置表单
        self.$refs.editForm.resetFields()
      }else if(self.activeTabsName=="2"){
        console.log('重置周期排班');
        self.cycleForm.name=''
        self.cycleForm.loopMode=0
        self.cycleForm.classesItem=[{
          name:null,
          personId:null,
          workingScheduleId:-100
        }]
        self.cycleForm.weekItem.map(item=>{
          item.name=null
          item.personId=null
          item.workingScheduleId=-100
        })

        // 重置表单
        self.$refs.cycleForm.resetFields()
        this.clickItem=""
      }
      // tab页切换到班次排班
      self.activeTabsName="1"
      this.editVisible=false
      // this.handleClose()
    },
    handleClose(){
      // 关闭编辑弹窗
      this.editVisible=false

      setTimeout(()=>{
        this.activeDay.dayIndex=null
        this.activeDay.row=null
        console.log('重置activeDay');
      },100)

      if (this.activeTabsName=="1"){
        // console.log('重置班次排班');
        this.classesPopFrom.workingScheduleId=null
        // 重置表单
        this.$refs.editForm.resetFields()
        this.resetCycle()
      }else if(this.activeTabsName=="2"){
        console.log('重置周期排班');

        this.resetCycle()
        // 重置表单
        // this.$refs.cycleForm.resetFields()
      }
      // tab页切换到班次排班
      this.activeTabsName="1"
      this.addTip=false
      this.clickList=[]
      this.clickindex=0
      this.clickItem=""
      this.clickDay=""
    },
    // 重置排班
    resetCycle(){
      this.cycleForm.name=''
      this.cycleForm.loopMode=0
      this.cycleForm.classesItem=[{
        name:null,
        personId:null,
        workingScheduleId:-100
      }]
      this.cycleForm.weekItem.map(item=>{
        item.name=null
        item.personId=null
        item.workingScheduleId=-100
      })
    },
    childrenGetParams(){

      this.$refs.form.validate((valid) => {
        if (valid){
          console.log('this.tableData',this.tableData);
          var params={
            attendanceGroupWoringSchedules:[],
            p_ApplyStartTime: this.selectedDate.startTime,
            p_ApplyEndTime: this.selectedDate.endTime,
            holidaysIsValid: this.form.holidaysIsValid,
          }
          var classes=[]
          for (var i=0;i<this.tableData.length;i++){
            for (var j=0;j<this.tableData[i].classesList.length;j++){
              var day=j+1<10?'0'+(j+1):j+1
              var temp={
                personId: this.tableData[i].personId,
                date: this.selectedDate.year+'-'+this.selectedDate.month+'-'+day,
                workingScheduleId: this.tableData[i].classesList[j].workingScheduleId==-100?null:this.tableData[i].classesList[j].workingScheduleId,
                // workingName: this.tableData[i].classesList[j].name,
                // personName: this.tableData[i].name,
              }
              params.attendanceGroupWoringSchedules.push(temp)
            }
          }
          this.$emit('getParams', params);
          console.log('classes',classes);
        }else{
          this.$emit('getParams', false);
          return false;
        }
      })


    },
    save(){

    },
    /*
    *周循环
    * classesList：当前月份每一天的排班列表
    * rule：选择的班次列表（数组下标0~6分别代表星期一~星期日）
    * startDateIndex：从第几天开始循环
    * startWeekIndex：从rule内的星期几开始(0~6，0是星期日，1是星期一，以此类推)
    * */
    applyRuleToClassesListWeek(classesList, rule, startDateIndex,startWeekIndex){
      console.log(1193, classesList, rule, startDateIndex,startWeekIndex)
      if (startWeekIndex<0||startWeekIndex>6){
        console.error("星期（startWeekIndex）只能是0~6之间的整数，其中0是星期日，1是星期一，以此类推...");
        return;
      }
      if (startWeekIndex==0){
        startWeekIndex=7
      }

      // 循环结束开关
      var flag=false
      for (var i=startDateIndex-1;i<classesList.length;i++){
        // debugger
        for (var j=j==rule.length?0:startWeekIndex-1;j<rule.length;j++){
          if (flag){
            break
          }
          // -100表示当天休息
          if (rule[j].workingScheduleId==-100){
            rule[j].workingScheduleId=null
          }
          classesList[i].workingScheduleId=rule[j].workingScheduleId
          classesList[i].name=rule[j].name
          i++
          // 内部循环每循环完一次，i-1，解决了两轮循环之间有一个数据没有被修改的问题
          if (j==rule.length-1){
            --i
          }
          // 循环到最后一天的时候，终止循环
          if (i>=classesList.length){
            flag=true
          }
        }
        if (flag){
          break
        }
      }
      return classesList;
    },
    /*
    * 周期排班弹窗的循环排班
    * classesList：当前月份每一天的排班列表
    * rule：选择的班次列表
    * startDateIndex：从第几天开始循环
    * */
    applyRuleToClassesList(classesList, rule, startDateIndex){
      console.log(1238, classesList, rule, startDateIndex)
      if (startDateIndex>classesList.length){
        console.error("开始日期不能大于当月的最大天数");
        return;
      }
      // 循环结束开关
      var flag=false

      for (var i=startDateIndex-1;i<classesList.length;i++){
        for (var j=0;j<rule.length;j++){
          if (flag){
            break
          }
          classesList[i].workingScheduleId=rule[j].workingScheduleId
          // classesList[i].index=j
          classesList[i].name = this.getworkingName(rule[j].workingScheduleId)
          i++

          if (j==rule.length-1){
            // 内部循环每循环一次，--1，避免出现循环完一次后，2次之间有一条数据没有被修改的问题
            --i
          }
          // 循环到最后一天的时候，终止循环
          if (i>=classesList.length){
            flag=true
          }
        }
        if (flag){
          break
        }
      }
      return classesList;
    },
    // 关闭周期排班
    closeClasses(){
      this.handleClose()
    },
    // 保存周期排班
    saveCycleClasses(){
      this.$refs.cycleForm.validate((valid, b) => {
        if (valid) {
          // console.log('this.cycleForm.weekItem',this.cycleForm.weekItem);
          // console.log('195',this.classesPopFrom);
          var currentRowData=this.activeDay.row.classesList,//表格内，当前行的数据
              currentDayIndex=this.activeDay.dayIndex+1,//被点击的那一天的列下标
              currentDay=this.activeDay.row.classesList[this.activeDay.dayIndex].date,//当前点击的日期
              filterClassesList=[],//点保存时，准备覆盖表格的数据源
              newClassesList={}

          // console.log('当前行数据',currentRowData);
          // console.log('当前点击的日期',currentDay);
          // console.log('点击的第',currentDayIndex,'天');
          // console.log('本月有',this.selectedDate.maxDays,'天');
          // console.log('选择了',this.cycleForm.classesItem.length,'天');
          // console.log('从' ,this.activeDay.row.classesList[this.activeDay.dayIndex], '开始');
          // console.log('this.activeDay.row',this.activeDay.row);
          // console.log('this.selectedDate',this.selectedDate);
          // debugger
          if (this.cycleForm.loopMode===0){

            console.log('按天循环');
            // 选择的规则数据，修改每一天的班次名、人员ID
            if (this.cycleForm.classesItem.length){
              this.cycleForm.classesItem.map(item=>{
                if (item.workingScheduleId){
                  item.name=this.getworkingName(item.workingScheduleId)
                  item.personId=this.activeDay.row.personId
                }
              })
            }
            console.log('选择的规则数据',this.cycleForm.classesItem);
            console.log('修改表格之前的数据',this.tableData);
            console.log('headerData',this.headerData);

            // 按照上面选择的规则，循环修改每一天的数据
            var arrTmp = this.cycleForm.classesItem;
            arrTmp.forEach((item, i) => {
              item.index = i;
              item.workingScheduleId = item.workingScheduleId === -100 ? null : item.workingScheduleId;
              delete item.key;
              delete item.name;
              delete item.personId;
            });
            filterClassesList=this.applyRuleToClassesList(currentRowData,this.cycleForm.classesItem,currentDayIndex)
            console.log('cccc', filterClassesList)
            newClassesList.name = this.cycleForm.name;
            newClassesList.type = this.cycleForm.loopMode*1;
            newClassesList.looperRulerDetails = arrTmp;

            console.log('循环排班后的数据', newClassesList);
          }else{
            console.log('按周循环',this.cycleForm.weekItem);
            // 选择的规则数据，修改每一天的班次名、人员ID
            let cycleItem = {};
            let cycleArr = [];
            if (this.cycleForm.weekItem.length){
              this.cycleForm.weekItem.map((item, index)=>{
                if (item.workingScheduleId){
                  item.name=this.getworkingName(item.workingScheduleId)
                  item.personId=this.activeDay.row.personId
                  cycleItem.workingScheduleId = item.workingScheduleId === -100 ? null : item.workingScheduleId;
                  cycleItem.index = index;
                  cycleArr.push(cycleItem);
                  cycleItem = {};
                }
              })
            }
            console.log(83, cycleArr);
            // debugger
            // 按照上面选择的规则，循环修改每一天的数据
            filterClassesList=this.applyRuleToClassesListWeek(currentRowData,this.cycleForm.weekItem,currentDayIndex,new Date(currentDay).getDay())
            newClassesList.name = this.cycleForm.name;
            newClassesList.type = this.cycleForm.loopMode*1;
            // newClassesList.looperRulerDetails = filterClassesList;
            newClassesList.looperRulerDetails = cycleArr;

            console.log('选择的规则数据',this.cycleForm.weekItem);
            console.log('选择的规则数据--',cycleArr);
            // console.log('选择的规则数据',JSON.stringify(this.cycleForm.weekItem));
            console.log('循环排班后的数据2',newClassesList);
          }
          looperrulerCreate(newClassesList)
              .then(res=>{
                if (res.code == 200) {
                  this.W.$tips("success", this.i18n.t('Successfully saved'));
                  // 刷新弹框内周列表
                  this.looperrulerGetList()
                  this.addTip = false;
                  this.$refs.cycleForm.resetFields()
                  this.resetCycle()
                } else {
                  this.W.$tips("error", this.i18n.t('Failed saved'));
                }
              }).catch(err => {
            this.W.$tips("error", this.i18n.t('Failed saved'));
          })

        }
      })
    },
    // 保存班次排班弹窗
    saveClasses(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log('下一步');
          // console.log(81, this.classesPopFrom.workingScheduleId);
          // console.log(82, this.classTabCheck);
          // console.log(83, this.classTabCheckInfo);
          // console.log(84, this.activeDay.row.personId);

          var personnelId=this.activeDay.row.personId,
              index=null
          // console.log('this.activeDay',JSON.stringify(this.activeDay));
          console.log('保存班次排班弹窗',personnelId,this.tableData);
          console.log('选择的班次',this.classesPopFrom.workingScheduleId);
          // console.log(1302,this.classesPopFrom);
          // console.log(1303,this.classesList);
          // debugger
          // 修改当天的班次ID
          for (var i=0;i<this.tableData.length;i++){
            // this.tableData[i].classesList[this.activeDay.dayIndex].css=this.classesPopFrom.css
            if (this.tableData[i].personId==personnelId){
              if (this.classesPopFrom.workingScheduleId==-100){
                this.tableData[i].classesList[this.activeDay.dayIndex].workingScheduleId=null
                this.tableData[i].classesList[this.activeDay.dayIndex].name="休息"
              }else{
                //this.tableData[i].classesList[this.activeDay.dayIndex].workingScheduleId=personnelId
                this.tableData[i].classesList[this.activeDay.dayIndex].workingScheduleId=this.classesPopFrom.workingScheduleId
              }

              index=i
              break
            }
          }

          console.log(305, this.classesList);

          // 设置每天的班次名称
          let self = this;
          if (this.classesPopFrom.workingScheduleId==-100){
            this.tableData[index].classesList[this.activeDay.dayIndex].name="休息"
          }else{
            for (var i=0;i<this.classesList[1].options.length;i++){
              if (this.classesList[1].options[i].id==self.classesPopFrom.workingScheduleId){
                this.tableData[index].classesList[this.activeDay.dayIndex].name=this.classesList[1].options[i].name
                // this.tableData[index].classesList[this.activeDay.dayIndex].color=this.classesList[1].options[i].color
                break
              }
            }
          }
          // console.log('修改后的班次',this.tableData[i].classesList[this.activeDay.dayIndex]);
          console.log('重置班次排班');
          this.classesPopFrom.workingScheduleId=null
          // 重置表单
          this.$refs.editForm.resetFields()

          // 关闭弹窗
          this.handleClose()
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 获取班次列表
    workingscheduleGetlist(){

      workingscheduleGetlist({
        pageNumber:1,
        pageSize:999,
        name:null
      }).then(res=>{
        if (res.code == 200) {
          res.data.values.forEach((item,index) => {
            if(index%3==0) {
              item.color="background: #ffe9d1;"
            } else if(index%3==1) {
              item.color="background: #fffad1;"
            } else {
              item.color="background: #e8e5fb;"
            }
          });
          this.classesList=[
            {
              label:'快捷选项',
              options:[
                {
                  name:"休息",
                  id:-100,
                  color: "background: #cff2bf;"
                }
              ]
            },
            {
              label: '班次列表',
              options:res.data.values
            }
          ]
        }
      }).catch().finally(()=>{

      })
    },
    cellClick(row, column, cell, event){
      var dayIndex=parseInt(column.label)
      // console.log(row, column, cell, event);
      // console.log('字段名',column.property);
      // console.log('第',dayIndex,'天');
      // console.log(168, this.cycleForm);
      if (!dayIndex){
        return
      }
      this.editVisible=true
      this.activeDay.dayIndex=dayIndex-1
      this.activeDay.row=row
      this.clickItem=this.activeDay.row.personId
      this.clickList=row.classesList
      this.clickIndex=dayIndex
      this.clickDay=row.classesList[dayIndex-1].date

      // console.log('this.activeDay',this.activeDay);
      // console.log('this.tableData',this.tableData);
      // console.log('row',row);
      // console.log(this.activeDay.row.classesList[column.label-1],this.activeDay.row.classesList[column.label-1].workingScheduleId);
      // debugger
      console.log(1074,row.classesList[column.label - 1]);
      if (row.classesList[column.label-1].workingScheduleId){
        // console.log('有相等,班次ID是',row.classesList[column.label-1].workingScheduleId);
        this.classesPopFrom.workingScheduleId=row.classesList[column.label-1].workingScheduleId
      }else{
        this.classesPopFrom.workingScheduleId=-100
      }

    },
    closePopover(){
      document.body.click() // 模拟点击页面其它部分关掉弹层，因为该页面列表使用懒加载导致doClose无效
    },
    // 计算这个月有多少天
    getDaysInMonth(date){
      // 获取月份的下一个月的第0天，即当前月的最后一天
      var lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      console.log('lastDayOfMonth',lastDayOfMonth);
      // 返回该月的天数
      return lastDayOfMonth.getDate();
    },
    // 月切换事件
    monthChange(date){
      console.log(date);


    },
    hanldeAdd() {
      this.$refs.ClassesRef.open();
    },
    hanldeDel() {
      this.$refs.deleteRef.open();
    },
  },
  mounted() {
    // setTimeout(()=>{
    //   console.log(1080,this.groupByIds(this.detailRow.personnelInfos));
    // },500)
    // 获取班次列表
    // this.workingscheduleGetlist()
    var date=new Date()

    this.form.month=new Date(date.getFullYear()+"-"+(date.getMonth()+1))
// debugger
    if (this.handleTypeSub=='edit'){
      // 设置节假日是否生效复选框选中状态
      this.form.holidaysIsValid=this.detailRow.holidaysIsValid
      if (this.detailRow.personnelInfos.length){
        var personnelInfos=this.detailRow.personnelInfos,
            treeSelection=[]
        // filterGroupWoringSchedules=this.groupByIds(personnelInfos)
        // 过滤出右侧人员的ID列表
        personnelInfos.map(item=>{
          treeSelection.push(item.id)
          var temp={
            id:item.id,
            name:item.name
          }
          this.rightTreeList.push(temp)
        })
        // setTimeout(()=>{
        //   // 设置右侧人员树勾选
        //   this.$parent.$parent.$parent.setTreeSelection(treeSelection)
        //   console.log('mounted回调中设置选中的人员列表',treeSelection);
        // },300)

        console.log(1104,personnelInfos);

      }
    }

  },
};
</script>
<style scoped lang="scss">

.weekend {
  background-color: rgba(252, 149, 182, 1) !important;
}
.popover-tab{
  // background-color: red;
  .wrap-item{
    margin-bottom: 6px;
    .item{
      background-color: rgba(255, 250, 209, 1);
      // display: inline-block;
      border-radius: 4px;
      font-size: 14px;
      padding: 9px 15px;
    }
  }
}

.redRow {
  background: red !important;
}
.greenRow {
  background: green !important;
}
.blueRow {
  background: blue !important;
}

.ml20 {
  margin-left: 20px;
  padding: 8px 20px 9px 20px;
}
#nameBox .el-input--mini {
  max-width: 330px;
}
//.el-table .el-table__body tbody tr td:hover
.el-table .el-table__body tbody tr td:hover .cell span{
  text-decoration:underline ;
  cursor: pointer;
}
.el-table__empty-text, .nodata-text{
  align-items: flex-start;
}
::v-deep .el-table th.el-table__cell {
  height: 20px; //修改成需要的高度，例如20px;
  font-weight: normal;
}
::v-deep .el-table .el-table__cell{
  padding: 2px 0;
}
::v-deep .el-dialog #cusRadio {
  display: block;
}

::v-deep .el-dialog #cusRadio .el-radio {
  //background: rgba(255, 233, 209, 1);
  display: block;
  margin-bottom: 10px;
  padding: 8px 12px;
  position: relative;
  width: 95%;
}
::v-deep .el-dialog #cusRadio .colorGreen {
  background: #cff2bf;
}
::v-deep .el-dialog #cusRadio .colorOrange {
  background: #ffe9d1;
}
::v-deep .el-dialog #cusRadio .colorYellow {
  background: #fffad1;
}
::v-deep .el-dialog #cusRadio .colorPurple {
  background: #e8e5fb;
}
::v-deep .el-dialog #cusRadio .el-radio__input {
  position: absolute;
  right: -30px;
}

::v-deep #cusRadio .el-radio__inner {
  background: none;
  border: none;
}

::v-deep #cusRadio .el-radio__input.is-checked {
  color: #000 !important;
}

::v-deep #cusRadio .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid green;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 2px;
  left: 1px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
.cycleTag,.cycleItemTag{
  margin-right: 10px;
  margin-bottom: 10px;
}
.cycleTag{
  background-color: #b9e1fa;
  color: #272b30;
  border-color: transparent;
}
.cycleTag:hover{
  border-color:#0570d3;
  cursor:pointer;
}
::v-deep .cycleTag .el-tag__close{
  color: #000000;
}
::v-deep .cycleTag .el-tag__close:hover{
  color: #fff;
  background-color: #000000 !important;
}
.cycleTitle{
  margin-bottom: 10px;
}
.cycleValue{
  font-weight: 700;
}
</style>
<style>
.el-month-table td.disabled .cell {
  color: #C0C4CC !important;
}
</style>
